import * as React from 'react';
import * as classNames from 'classnames';
import { List } from "immutable";
var styles = require('./tab.less');
class TabPage extends React.PureComponent<any, any> {
  render() {
    const { title, url, show } = this.props;
    return (
      <div className={classNames("mainPage", { hidden: !show })}>
        <iframe id="iframe" name={title} width="100%" height="100%" frameBorder="0" scrolling="auto" src={url}></iframe>
      </div>)
  }
}

export default class Tab extends React.PureComponent<any, any> {
  static contextTypes = {
    selectTabPage: React.PropTypes.func,
    deleteTabPage: React.PropTypes.func
  }
  refreshTab() {
  }

  closeAllTab() {
  }

  closeOtherTab() {
  }


  render() {
    const list = this.props.tabConfigs.get("list");
    const selectTitle = this.props.tabConfigs.get("selectTitle");
    return (
      <div className="tabDiv">
        <div className="tab_title">
          <div className="vleft"></div>
          <div className="topTab">
            <ul id="tab">
              {
                list.map(tabConfig =>
                  <li key={tabConfig.title} className={classNames("normal", { select: tabConfig.title == selectTitle })}>
                    <span className="fl" onClick={() => { this.context.selectTabPage(tabConfig.title) }}>{tabConfig.title}</span>
                    {tabConfig.deletable !== false && <span className="tabClose" onClick={() => { this.context.deleteTabPage(tabConfig.title) }}></span>}
                  </li>
                )}
            </ul>
          </div>
          <div id="down" className="downArrow">
            <div className="tabActionArea"></div>
            <div id="downlist" className="downArrowContent">
              <span><a href="javascript:;" onClick={this.refreshTab}>刷新当前页</a></span>
              <span><a href="javascript:;" onClick={this.closeAllTab}>关闭全部</a></span>
              <span><a href="javascript:;" onClick={this.closeOtherTab}>关闭其他</a></span>
            </div>
          </div>
          <div className="vright"></div>
        </div>
        {
          list.map(tabConfig =>
            <TabPage key={tabConfig.title}
              title={tabConfig.title}
              url={tabConfig.url}
              show={tabConfig.title == selectTitle}></TabPage>)
        }
      </div >)
  }
}

